
charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
h1{
    font-size: 100px;
    font-family: 华文彩云;
}
body{
    background: url("../img/bj.png");
    background-size: 2000px 1000px;
}
#sun{
    width: 300px;
    height: 300px;
    bor der:1px solid red;
    background: url("../img/taiyang.png")no-repeat;
    top: -50px;
    left: -8px;
    position: relative;
    animation: sun 10s linear infinite;
}
#g {
    width: 500px;
    height: 600px;
    background: url(../img/g1.png) no-repeat;
    background-size: 300px 300px;
    position: relative;
    left: -8px;
    top: -8px;
    animation: g 10s linear infinite;
}
@keyframes sun{
    0%{
        width: 300px;
        height: 300px;
        background: url("../img/taiyang.png")no-repeat;
        background-size:300px 300px;
        transform: rotate(15deg)scale(1.8);
        left: -8px;
        top: -8px;
    }
    35%{
        width: 300px;
        height: 300px;
        background: url("../img/taiyang.png")no-repeat;
        background-size:300px 300px;
        transform: rotate(15deg)scale(1.8);
        left: 16px;
        top: 20px;
    }
    70%{
        width: 300px;
        height: 300px;
        background: url("../img/taiyang.png")no-repeat;
        background-size:300px 300px;
        transform: rotate(15deg)scale(1.8);
        left: -8px;
        top: -8px;
    }
    100%{
        width: 300px;
        height: 300px;
        background: url("../img/taiyang.png")no-repeat;
        background-size:300px 300px;
        transform: rotate(15deg)scale(1.8);
        left: -8px;
        top: -8px;
    }
}
@keyframes g{
    0%{
        background: url(../img/g2.png)no-repeat;
        background-size: 300px 300px;
        transform: rotate(0deg)scale(1);
        top:-106px;
        left:190px;
    }
    25%{
        background: url(../img/g3.png)no-repeat;
        background-size: 300px 300px;
        transform: rotate(7deg)scale(1);
        top:-56px;
        left:109px;
    }
    50%{
        background: url(../img/g4.png)no-repeat;
        background-size: 600px 300px;
        transform: rotate(8deg)scale(1);
        top:600px;
        left:999px;
    }
    75%{
        background: url(../img/g7.png)no-repeat;
        background-size: 300px 300px;
        transform: rotate(7deg)scale(1);
        top:300px;
        left:500px;
    }
    100%{
        background: url(../img/g8.png)no-repeat;
        background-size: 300px 300px;
        transform: rotate(6deg)scale(0.8);
        top:400px;
        left:390px;
    }
}
